<template>
  <div>
    <a-flex
      gap="middle"
      vertical
    >
      <a-radio-group v-model:value="value">
        <a-radio value="horizontal">horizontal</a-radio>
        <a-radio value="vertical">vertical</a-radio>
      </a-radio-group>
      <a-flex :vertical="value === 'vertical'">
        <div
          v-for="item in  4"
          :key="item"
          style="width: 25%;border: 1px solid red;"
        >
          {{item}}
        </div>
      </a-flex>
    </a-flex>

    <a-divider />
    <a-flex
      vertical
      gap="30"
      align="start"
    >
      <a-segmented
        v-model:value="justify"
        :options="justifyOptions"
      />
      <a-segmented
        v-model:value="alignItems"
        :options="alignOptions"
      />
    </a-flex>

    <a-flex
      :vertical="value === 'vertical'"
      :justify="justify"
      :align="alignItems"
      style="border:1px solid red;height: 50px;"
    >
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
      <a-button type="primary">Primary</a-button>
    </a-flex>

    <a-flex
      gap="middle"
      wrap="wrap"
    >
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="primary">按钮</a-button>

    </a-flex>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      value: "horizontal",
      justifyOptions: [
        'flex-start',
        'center',
        'flex-end',
        'space-between',
        'space-around',
        'space-evenly',
      ],
      alignOptions: [
        'flex-start', 'center', 'flex-end'
      ],
      justify: 'flex-start',
      alignItems: 'flex-start',

    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
